<style>
    .floors {
        width: 1000px;
    }

    .floor {
        height: 300px;
        margin-bottom: 20px;
    }

    .floor li {
        float: left;
    }

    .floor ul {
        display: block;
        height: 100%;
    }

    .floor li {
        display: block;
        float: left;
        height: 100%;
    }

    .floor img {
        max-height: 10000px;
        border: 1px solid #ddd;
        padding: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>
<div class="floors">
    <a href="javascript:;" data-bind="{click : add}" class="btn">添加楼层</a>

    <div data-bind="foreach : floor_items">
        <div class="each_floor">
            <p style="overflow: hidden;margin-top: 10px;margin-bottom: 10px;">
        <span style="float: left;">
            楼层名字：<input type="text" name="floor_name" data-bind="value:floor_name">
            &nbsp;
            &nbsp;
            楼层颜色：<input type="text" name="floor_color" data-bind="value:color">
            &nbsp;
            &nbsp;
            热门分类：<input type="text" name="floor_hot_cate" data-bind="value:floor_hot_cate" placeholder="类a:cid(数字),类b:2 ">
            &nbsp;
            &nbsp;
            更多链接：<input type="text" name="more" data-bind="value:more"/>
        </span>
        <span style="float: right;">
            <a href="javascript:;" data-bind="click: $parent.remove" class="btn">删除</a>
        </span>
            </p>

            <div class="floor" data-bind="with : images" data-index="05126378">
                <ul>
                    <li>
                        <img onerror="imgerror(this)" style="width: 200px;display: block;height: 300px;" data-bind="attr: {src : template_path + $data[0].pic,link : $data[0].link,goods_name:$data[0].goods_name,des:$data[0].des}" alt="">
                    </li>
                    <li>
                        <img onerror="imgerror(this)" style="width: 200px;display: block;height: 150px;"
                             data-bind="attr: {src : template_path + $data[1].pic,link : $data[1].link ,goods_name:$data[1].goods_name,des:$data[1].des}" alt="">
                        <img onerror="imgerror(this)" style="width: 200px;height: 150px;"
                             data-bind="attr: {src : template_path + $data[2].pic,link : $data[1].link,goods_name:$data[2].goods_name,des:$data[2].des}">
                    </li>
                    <li>
                        <img onerror="imgerror(this)" data-bind="attr: {src : template_path + $data[3].pic,link : $data[3].link,goods_name:$data[3].goods_name,des:$data[3].des}"
                             style="display: block;width: 200px;height: 150px;">
                        <img onerror="imgerror(this)" data-bind="attr: {src : template_path + $data[4].pic,link : $data[4].link,goods_name:$data[4].goods_name,des:$data[4].des}"
                             style="display: block;width: 200px;height: 150px;">
                    </li>
                    <li>
                        <img onerror="imgerror(this)" data-bind="attr: {src : template_path + $data[5].pic,link : $data[5].link,goods_name:$data[5].goods_name,des:$data[5].des}"  style="display: block;width: 200px;height: 150px;">

                            <img onerror="imgerror(this)" data-bind="attr: {src : template_path + $data[6].pic,link : $data[6].link,goods_name:$data[6].goods_name,des:$data[6].des}"
                                 style="display: block;width: 200px;height: 150px;float: left;">
                    </li>
                    <li>
                        <img onerror="imgerror(this)" data-bind="attr: {src : template_path + $data[7].pic,link : $data[7].link,goods_name:$data[7].goods_name,des:$data[7].des}" style="display: block;width: 200px;height: 150px;">
                        <img onerror="imgerror(this)" data-bind="attr: {src : template_path + $data[8].pic,link : $data[8].link,goods_name:$data[8].goods_name,des:$data[8].des}" style="display: block;width: 200px;height: 150px;float:left;">
                    </li>
                    <li style="display:none;">
                        <img onerror="imgerror(this)" data="attr: {src : template_path + $data[9].pic,link : $data[9].link,goods_name:$data[9].goods_name,des:$data[9].des}" style="display: block;width: 200px;height: 400px;">
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>

<script>
    function floor_images(images) {
        return ko.observableArray(images);
    }

    function floor(item) {
        var self = this;
        this.images = ko.observableArray(item.images);
        this.floor_name = ko.observable(item.floor_name);
        this.color = ko.observable(item.color);
        this.more = ko.observable(item.more);
        this.floor_hot_cate = ko.observable(item.floor_hot_cate);
    }

    function floors() {
        var items = <?php echo json_encode($items)?>;
//        console.log(items);
        this.floor_items = ko.observableArray([]);
        for (var i in items) {
            this.floor_items.push(new floor(items[i]));
        }

        var self = this;
        this.remove = function () {
            self.floor_items.remove(this);
        };
        this.add = function () {
            var obj = {images: [], floor_name: '', color: '', more: '',floor_hot_cate:''};
            for (var i = 0; i < 10; i++) {
                obj.images.push({
                    pic: '',
                    link: '',
                    goods_name: '',
                    des: ''
                });
            }
            self.floor_items.push(new floor(obj))
        };
    }
    ko.applyBindings(new floors(), $('.floors')[0]);
</script>